<template>
	<view class="content">
		<!-- 开屏广告：传递duration确保倒计时生效 -->
		<SplashAd :visible="showSplashAd" :adImage="splashAdImage" :adLink="splashAdLink" :duration="5"
			@close="onSplashAdClose" />
		<view class="leave_black">

		</view>
		<Topnavs :title="parentTitle"></Topnavs>

		<view class="swipers">
			<u-swiper :list="list1" height="178" :bg-color="'transparent'" @click="getarticles"></u-swiper>
		</view>
		<view class="tabs">
			<view class="tabs_list" v-for="(item, index) in lists" :key="index" @click="onprops(index)">
				<div class="icon">
					<image style="width: 40rpx;height: 40rpx;" :src="item.icons" mode=""></image>
				</div>
				<div class="text">
					<image style="width: 50rpx;height: 30rpx;" :src="item.title" mode=""></image>
				</div>
			</view>

		</view>
		<view class="mokuais" v-for="(item, index) in mocks" :key="index">
			<image style="width: 100%;height: 100%;" :src="item.image" @click="ondianjis(index)" mode=""></image>
		</view>
		<view class="btms">

		</view>
		<!-- 任务弹窗 -->
		<view class="taskPopup" v-if="taskShow" @click="taskpopupclick">
			<view class="box" @click.stop>
				<view class="close" @click="taskShow=false">

				</view>
				<view class="title"
					style="background-image: url('https://jingkakeji.oss-cn-shenzhen.aliyuncs.com/static/new_index/task_title.png');">
				</view>
				<view class="listbox">
					<view class="task_scroll_list">
						<view class="task_list_item" v-for="(item,index) in taskList" :key="index">
							<view class="msgBox">
								<view class="msgBox_left">
									<view class="imgbox">
										<view class="img"></view>
									</view>
									<view class="info">
										<view class="info_title" v-if="item.code=='register'">
											新人注册福利
										</view>
										<view class="info_title" v-if="item.code=='realname'">
											实名认证奖励
										</view>
										<view class="info_title" v-if="item.code=='openbox'">
											累计开箱({{item.progress}}/{{item.target}})
										</view>
										<view class="info_title" v-if="item.code=='signin_day1'">
											每日奖励
										</view>
										<view class="info_title" v-if="item.code=='signin_day7'">
											累计天数({{item.progress}}/{{item.target}})
										</view>
										<view class="text">
											完成任务开启福利宝箱
										</view>
									</view>
								</view>
								<view class="msgBox_right">

								</view>
							</view>
							<view class="line"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 排行榜弹窗 -->
		<view class="rankPopup" v-if="rankShow" @click="tankpopupclick">
			<view class="box" @click.stop>
				<view class="close" @click="rankShow=false">

				</view>
				<view class="title" style="background-image: url('');">
				</view>
				<view class="boxc">
					<view class="tab">
						<view class="tab_item" :class="{ active: currentTabIndex === index }"
							v-for="(item, index) in ranktab" :key="index" @click="switchTab(index)">
							{{ item.title }}
						</view>
					</view>
					<view class="tab_er">
						<view class="tab_er_item" :class="{ active: currentTabErIndex === index }"
							v-for="(item, index) in tab_er" :key="index" @click="switchTabEr(index)">
							{{ item.title }}
						</view>
					</view>
					<view class="list">
						<view class="list_scroll_list">
							<view class="title">
								<view>排名</view>
								<view>用户</view>
								<view>金额</view>
							</view>
							<!-- 统一渲染排行榜列表，避免重复模板 -->
							<view class="item" v-for="(item, index) in currentRankList" :key="index">
								<view class="number"
									:style="{ backgroundImage: index === 0 ? 'url(https://img.jingkakeji.com/img/static/else_img/one.png)' : index === 1 ? 'url(https://img.jingkakeji.com/img/static/else_img/two.png)' : index === 2 ? 'url(https://img.jingkakeji.com/img/static/else_img/three.png)' : '' }">
									<text v-if="index>2">{{ index + 1 }}</text>
								</view>
								<view class="userinfo">
									<view class="avatar" :style="{backgroundImage: 'url(' + item.avatar + ')'}"></view>
									<view class="name">{{item.name}}</view>
								</view>
								<view class="money">{{ item[currentMoneyKey] }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Tabbars></Tabbars>
	</view>
</template>

<script>
	import {
		getWelfare,
		getUsetInof,
		getBoxDetail,
		getRank,
		getRankTwo,
		getRankThree,
		getTaskList,
		getTaskCenter
	} from "../../api/outOfTheFree/index.js"
	import {
		playSound
	} from "../../utils/soundSettings.js"
	import CSGORankingPopup from "../../Component/phprops/phprops.vue"
	import ChangePhoneModal from "../../Component/change-phone-modal/change-phone-modal.vue"
	import renwus from "../../Component/renwu/renwu.vue"
	import xiaoxis from "../../Component/xiaoxi/xiaoxi.vue"
	import Topnavs from "../../Component/navgat/navgat.vue"
	import Tabbars from "../../Component/Tabbars/Tabbars.vue"
	// 导入开屏广告组件
	import SplashAd from "../../Component/splashad/splashad.vue"

	export default {
		data() {
			return {
				parentTitle: {},
				backgroundUrl: "https://img.jingkakeji.com/img/static/banner.png",
				list1: [
					"https://img.jingkakeji.com/img/static/banner.png",
				],
				lists: [{
						icons: "https://img.jingkakeji.com/img/static/zufour.png",
						title: "https://img.jingkakeji.com/img/static/indexlist/fuli.png"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/uis.png",
						title: "https://img.jingkakeji.com/img/static/indexlist/renwu.png"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/xiaoxis.png",
						title: "https://img.jingkakeji.com/img/static/indexlist/xiaoxi.png"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/xiaopai.png",
						title: "https://img.jingkakeji.com/img/static/indexlist/paihang.png"
					},
					{
						icons: "https://img.jingkakeji.com/img/static/zufour.png",
						title: "https://img.jingkakeji.com/img/static/indexlist/kefu.png"
					}
				],
				mocks: [{
						image: "https://img.jingkakeji.com/img/static/jingdianmang.png"
					},
					{
						image: "https://img.jingkakeji.com/img/static/mangpk.png"
					},
					{
						image: "https://img.jingkakeji.com/img/static/luckysd.png"
					},
					{
						image: "https://img.jingkakeji.com/img/static/rollnm.png"
					}
				],
				// 开屏广告相关配置
				showSplashAd: false,
				splashAdImage: 'https://img.jingkakeji.com/img/static/kaiping.png', // 广告图片
				splashAdLink: '/pages/promotion/detail', // 广告跳转链接

				taskShow: true, //任务s弹窗
				rankShow: false, //排行榜弹窗
				ranktab: [{
					id: 1,
					title: "经典盲盒"
				}, {
					id: 2,
					title: "盲盒对战"
				}, {
					id: 3,
					title: "幸运饰品"
				}],
				tab_er: [{
					id: 1,
					title: "流水排行"
				}, {
					id: 2,
					title: "金额排行"
				}],
				currentTabIndex: 0, // 当前选中的tab索引，默认为第一个
				currentTabErIndex: 0, // 当前选中的tab_er索引，默认为第一个
				rankList: [], //经典盲盒排行榜
				rankTwoList: [], //盲盒对战排行榜
				rankThreeList: [], //幸运饰品排行榜
				taskList: [], //任务列表
			}
		},
		components: {
			Topnavs,
			Tabbars,
			renwus,
			xiaoxis,
			ChangePhoneModal,
			CSGORankingPopup,
			SplashAd
		},
		computed: {
			// 当前列表：根据一级tab决定数据源
			currentRankList() {
				if (this.currentTabIndex === 0) return this.rankList
				if (this.currentTabIndex === 1) return this.rankTwoList
				if (this.currentTabIndex === 2) return this.rankThreeList
				return []
			},
			// 金额字段：二级tab 0=流水 1=金额
			currentMoneyKey() {
				return this.currentTabErIndex === 0 ? 'total_water' : 'total_amount'
			}
		},
		onShow() {
			this.getTask()
			this.getTaskCenter()
			this.checkSplashAd() // 检查是否需要显示开屏广告
			let token = uni.getStorageSync('token')
			if (token) {
				this.getusers()
			} else {
				// 如果没有token，清除用户信息
				this.parentTitle = {}
			}
		},
		onLoad() {
			// 可以在这里请求最新的开屏广告数据
			this.fetchSplashAdData()
			uni.hideTabBar();
		},
		methods: {
			//用户信息
			async getusers() {
				let res = await getUsetInof()
				this.parentTitle = res.data
			},
			//点击轮播图
			async getarticles() {
				// console.log('swiper');
			},
			// tab
			onprops(index) {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/index/welfare/welfare"
					})
				} else if (index == 1) {
					this.taskShow = true
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/index/come/come"
					})
				} else if (index == 3) {
					this.rankShow = true
					this.getRank()
					this.getRankTwo()
					this.getRankThree()
				} else if (index == 4) {
					window.open(
						"https://www.baidu.com/"
					)
				}
			},
			//关闭tab弹窗
			taskpopupclick() {
				this.taskShow = false
			},
			//关闭排行榜弹窗
			tankpopupclick() {
				this.rankShow = false
			},
			//切换tab
			switchTab(index) {
				this.currentTabIndex = index
			},
			//切换tab_er
			switchTabEr(index) {
				this.currentTabErIndex = index
			},
			handleClose() {
				console.log('排行榜已关闭')
			},
			//内容板块
			ondianjis(index) {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/mangbox/mangbox"
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/pks/pks"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/lucky/lucky"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "/pages/roll/roll"
					})
				}
			},

			// 检查是否需要显示开屏广告
			checkSplashAd() {
				const today = this.formatDate(new Date())
				const lastShowDate = uni.getStorageSync('splashAdLastShowDate')
				const neverShowAgain = uni.getStorageSync('splashAdNeverShowAgain')

				// 如果用户没有设置永不显示，且今天未显示过，则显示
				if (!neverShowAgain && lastShowDate !== today) {
					this.showSplashAd = true
				}
			},

			// 格式化日期为YYYY-MM-DD
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},

			// 处理开屏广告关闭
			onSplashAdClose(event) {
				this.showSplashAd = false
				// 记录今天已显示
				uni.setStorageSync('splashAdLastShowDate', this.formatDate(new Date()))
			},

			// 请求最新的开屏广告数据
			async fetchSplashAdData() {
				try {
					// 实际项目中从接口获取广告数据
					// const res = await getSplashAd()
					// if (res.success && res.data) {
					//   this.splashAdImage = res.data.imageUrl
					//   this.splashAdLink = res.data.linkUrl
					//   this.duration = res.data.duration || 5
					// }
				} catch (error) {
					console.error('获取开屏广告数据失败:', error)
				}
			},
			//经典盲盒排行榜
			async getRank() {
				try {
					let res = await getRank()
					console.log(res.data.list);
					this.rankList = res.data.list
				} catch (error) {
					console.error('获取数据失败:', error)
				}
			},
			//盲盒对战排行榜
			async getRankTwo() {
				try {
					let res = await getRankTwo()
					console.log(res.data.list);
					this.rankTwoList = res.data.list
				} catch (error) {
					console.error('获取数据失败:', error)
				}
			},
			//幸运饰品排行榜
			async getRankThree() {
				try {
					let res = await getRankThree()
					console.log(res.data.list);
					this.rankThreeList = res.data.list
				} catch (error) {
					console.error('获取数据失败:', error)
				}
			},
			//获取任务列表
			async getTask() {
				try {
					let res = await getTaskList()
					console.log(res.data.list);
					this.taskList = res.data.list
				} catch (error) {
					console.error('获取数据失败:', error)
				}
			},
			//获取任务中心配置
			async getTaskCenter() {
				try {
					let res = await getTaskCenter()
					console.log(res);
				} catch (error) {
					console.error('获取数据失败:', error)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: calc(100vh - 100rpx);
		background: url("https://img.jingkakeji.com/img/static/huabanone.png");
		overflow-y: scroll;
		/* 移除默认边距，确保背景充满整个屏幕 */
		margin: 0;
		padding: 0;

		/* 设置背景图片 */
		/* background-image: url('your-image.jpg'); */

		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;

		/* 固定背景，滚动页面时背景不动 */
		background-attachment: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.taskPopup,
	.rankPopup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			width: 670rpx;
			height: 820rpx;
			background-image: url("https://img.jingkakeji.com/img/static/new_index/box_bg.png");
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			>.title {
				width: 190rpx;
				height: 70rpx;
				background-size: 100% 100%;
				margin-top: 30rpx;
			}

			.boxc {
				width: 88%;
				height: 660rpx;
				margin-top: 20rpx;
			}
		}
	}

	.taskPopup {
		.box {
			position: relative;

			.close {
				position: absolute;
				right: 0;
				top: 0;
				width: 40rpx;
				height: 40rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_index/close.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.listbox {
			width: 85%;
			height: 650rpx;
			margin-top: 20rpx;
			overflow-y: scroll;

			.task_scroll_list {
				width: 100%;
				height: auto;

				.task_list_item {
					width: 100%;
					height: 140rpx;
					margin-bottom: 15rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.msgBox {
						width: 100%;
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.msgBox_left {
							width: 380rpx;
							height: 100rpx;
							display: flex;
							align-items: center;

							.imgbox {
								width: 100rpx;
								height: 80rpx;
								background-image: url("https://img.jingkakeji.com/img/static/curad.png");
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								display: flex;
								align-items: center;
								justify-content: center;

								.img {
									width: 60rpx;
									height: 54rpx;
									background-image: url("https://img.jingkakeji.com/img/static/tucengone.png");
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;
								}
							}

							.info {
								width: 280rpx;
								height: 80rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.info_title {
									font-size: 30rpx;
									color: white;
								}

								.text {
									font-size: 20rpx;
									color: #FFFFFF;
								}
							}
						}

						.msgBox_right {
							width: 150rpx;
							height: 70rpx;
							background-color: saddlebrown;
						}
					}

					.line {
						width: 100%;
						height: 3rpx;
						background: linear-gradient(to right, #a2a2a2, white, #a2a2a2);
					}
				}
			}
		}
	}

	.rankPopup {
		.box {
			width: 680rpx;
			height: 1300rpx;
			background-image: url("https://img.jingkakeji.com/img/static/new_index/rank_bg.png");
			position: relative;

			.close {
				position: absolute;
				right: 0;
				top: 0;
				width: 40rpx;
				height: 40rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_index/close.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.boxc {
				width: 85%;
				height: 1080rpx;
				margin-top: 40rpx;

				.tab {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tab_item {
						width: 180rpx;
						height: 70rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_index/ranktabitem.png");
						background-size: 100% 100%;
						text-align: center;
						line-height: 70rpx;
						font-size: 25rpx;
						color: white;
					}

					.active {
						background-image: url("https://img.jingkakeji.com/img/static/new_index/ranktabitemactive.png");
					}
				}

				.tab_er {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tab_er_item {
						width: 45%;
						height: 100rpx;
						text-align: center;
						line-height: 100rpx;
						color: white;
						font-size: 28rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_index/tab_er_bg.png");
						background-size: contain;
						background-position: center calc(100% - 8rpx);
						background-repeat: no-repeat;
					}

					.active {
						background-image: url("https://img.jingkakeji.com/img/static/new_index/tab_er_bg_active.png");
						background-position: bottom;
					}
				}

				.list {
					width: 100%;
					height: 900rpx;
					overflow-y: scroll;

					.list_scroll_list {
						width: 100%;
						height: auto;

						.title {
							width: 100%;
							height: 60rpx;
							display: flex;
							color: white;
							font-size: 24rpx;
							justify-content: space-between;

							>view:nth-child(1) {
								width: 100rpx;
								height: 100%;
								text-align: center;
								line-height: 60rpx;
							}

							>view:nth-child(2) {
								width: 250rpx;
								height: 100;
								text-align: left;
								line-height: 60rpx;
							}

							>view:nth-child(3) {
								width: 160rpx;
								height: 100%;
								text-align: center;
								line-height: 60rpx;
							}
						}

						.item {
							width: 100%;
							height: 90rpx;
							background-color: rgba(255, 255, 255, 0.3);
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.number {
								width: 50rpx;
								height: 50rpx;
								margin-left: 20rpx;
								background-size: contain;
								background-position: center;
								background-repeat: no-repeat;
								text-align: center;
								line-height: 48rpx;
								font-size: 20rpx;
							}

							.userinfo {
								width: 250rpx;
								height: 80rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.avatar {
									width: 50rpx;
									height: 50rpx;
									background-size: cover;
									background-color: white;
								}

								.name {
									width: 180rpx;
									font-size: 24rpx;
									color: white;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.money {
								width: 130rpx;
								height: 80rpx;
								color: #FF9B2A;
								text-align: left;
								margin-right: 20rpx;
								line-height: 80rpx;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}

	.swipers {
		width: 90%;
		height: 375rpx;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}

	.tabs {
		width: 90%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		/* 平均分配，首尾不留间隔 */
	}

	.tabs_list {
		width: 116rpx;
		height: 150rpx;
		background: url("https://img.jingkakeji.com/img/static/zus.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中（可选） */
		gap: 5px;
		/* 图标和文字的间距 */
		color: #ffffff;
	}

	.text {
		font-size: 24rpx;
	}

	.mokuais {
		width: 90%;
		min-height: 180rpx;
		margin-top: 20rpx;
	}

	.btms {
		width: 100%;
		height: 100rpx;
	}
</style>